<template>
	<view class="my-page">
		<u-navbar leftIconColor="#fff" titleStyle="color:#fff" title="云币大搏杀列表" bgColor="transparent" :autoBack="true"
			:placeholder="false">
			<view  slot="right" style="color: #fff; font-size: 24rpx;" @click="gocanyu">
				参与记录
			</view>
		</u-navbar>
		<view class="release" @click="show = true"></view>
		<view class="list-content">
			<view class="list-item" v-for="(item,index) in list" :key="index">
				<view class="item-info">
					<image :src="'https://web.sunsk.top'+item.u_img||'/static/my/my_head.png'" mode=""></image>
					<view class="info-right">
						<view>
							<view class="name">
								{{item.name}}
							</view>
							<view class="tell">
								{{item.tel}}
							</view>
						</view>
						<view class="btn" @click="goDetails(item.id)">
							查看搏杀
						</view>
					</view>
				</view>
				<view class="points">
					<view class="points-item">
						<view class="points-num">
							{{item.total_po}}
						</view>
						<view class="points-text">
							矿池
						</view>
					</view>
					<view class="points-item">
						<view class="points-num">
							{{item.num}}/5
						</view>
						<view class="points-text">
							已加入搏杀
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
		<u-popup :show="show" mode="center" round="30rpx">
			<view class="transfer">
				<view class="transfer-box">
					<view class="transfer-title">
						云币大搏杀
					</view>
					<view class="content-title">
						云币大搏杀名称
					</view>
					<view class="entry">
						<u--input maxlength="16" border="none" color="#fff" v-model="name"
							placeholder="请输入云币大搏杀名称"></u--input>
					</view>
					<view class="content-title">
						云矿石
					</view>
					<view class="head">
						<view :class="item.show == true?'activity':'stillness'" class="head-item"
							v-for="(item,index) in headList" :key="index" @click="headTab(index)">
							{{item.text}}
						</view>
					</view>
					<view class="transfer-btn">
						<view class="btn">
							<u-button @click="show = false" color="#eeeeee33" size="large" shape="circle" type="primary"
								text="取消"></u-button>
						</view>
						<view class="btn" @click="confirm">
							<u-button
								color="linear-gradient(90deg, #C8F673 0%, #98F083 100%)" style="color: #000;"
								size="large" shape="circle" type="primary" text="确定"></u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				name: '',
				headList: [{
						text: '10云矿石',
						show: true
					},
					{
						text: '50云矿石',
						show: false
					},
					{
						text: '100云矿石',
						show: false
					},
					{
						text: '200云矿石',
						show: false
					}
				],
				text: 10,
				page: 1,
				list: [],
				status: 'loadmore',
			}
		},
		onShow() {
			this.page = 1
			this.postlist()
		},
		onReachBottom() {
			this.page++
			this.status = 'loading';
			this.postlist()
		},
		methods: {
			gocanyu() {
				uni.navigateTo({
					url: '/pages/home/team_work/record'
				})
			},
			postlist() {
				this.$Request({
					method: 'POST',
					url: '/api/luckys/pintuanlist',
					data: {
						page: this.page,
					}
				}).then(res => {
					if (res.code == 1) {
						if (res.data.list.length < 10) {
							this.status = 'nomore';
						}
						if (this.page == 1) {
							this.list = res.data.list
						} else {
							this.list = [...this.list, ...res.data.list]
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			confirm() {
				if (this.name == '') {
					uni.showToast({
						title: '请输入云币大搏杀名称！',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				let params = {
					name: this.name,
					points: this.text
				}
				this.$Request({
					method: 'POST',
					url: '/api/luckys/create',
					data: params
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.show = false
						uni.showToast({
							title: '发起云币大搏杀成功！',
							icon: 'none'
						})
						this.page = 1
						this.postlist()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})

			},
			headTab(index) {
				this.headList.map((item) => {
					item.show = false
				})
				this.headList[index].show = true
				if (index == 0) {
					this.text = 10
				}
				if (index == 1) {
					this.text = 50
				}
				if (index == 2) {
					this.text = 100
				}
				if (index == 3) {
					this.text = 200
				}
			},
			goDetails(id) {
				uni.navigateTo({
					url: '/pages/home/team_work/details?id=' + id
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #17191A;
	}

	.red-text-btn {
		color: #17191A !important;
		/* 使用 !important 来确保覆盖默认样式 */
		font-weight: bold;
	}
</style>
<style lang="scss" scoped>
	.my-page {
	
		.release {
			height: 429rpx;
			background-image: url('../../../static/home/buying.png');
			background-repeat: no-repeat;
			background-size: 100% 429rpx;
		}

		.list-content {
			padding: 30rpx;
			color: #fff;
			margin-top: 10rpx;

			.list-item {
				background: linear-gradient(134deg, rgba(255, 227, 211, 0.06) 0%, rgba(67, 130, 84, 0.26) 100%);
				border: 4rpx solid rgba(108, 233, 137, 0.12);
				padding: 30rpx;
				border-radius: 20rpx;
				margin-bottom: 30rpx;

				.item-info {
					display: flex;
					align-items: center;

					image {
						width: 82rpx;
						height: 82rpx;
						border-radius: 50%;
					}

					.info-right {
						width: 85%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-left: 20rpx;

						.name {
							color: #fff;
							font-size: 28rpx;
						}

						.tell {
							margin-top: 10rpx;
							color: #999;
							font-size: 24rpx;
						}
					}

					.btn {
						background: linear-gradient(90deg, #C8F673 0%, #98F083 100%);
						padding: 10rpx 30rpx;
						border-radius: 10rpx;
						font-size: 24rpx;
						color: #17191A;
					}
				}

				.points {
					display: flex;
					justify-content: space-around;
					text-align: center;
					margin-top: 30rpx;

					.points-item {
						.points-num {
							font-size: 28rpx;
							font-weight: bold;
							color: #A1FFA9;
						}

						.points-text {
							margin-top: 10rpx;
							font-size: 20rpx;
							color: #999;
						}
					}
				}
			}
		}

		.transfer {
			width: 686rpx;
			background: #17191A;
			border-radius: 30rpx;
			overflow: hidden;

			.transfer-box {
				background: linear-gradient( 134deg, rgba(255,227,211,0.06) 0%, rgba(67,130,84,0.26) 100%);
				padding: 30rpx 30rpx 40rpx;

				color: #fff;

				.transfer-title {
					font-size: 32rpx;
					font-weight: 600;
					padding: 0 30rpx;
					text-align: center;
				}

				.content-title {
					font-size: 28rpx;
					font-weight: 600;
					padding: 30rpx 0;
				}

				.entry {
					padding: 20rpx;
					background-color: rgba(238, 238, 238, 0.2);
					border-radius: 20rpx;
				}

				.transfer-btn {
					display: flex;
					justify-content: space-between;
					margin-top: 40rpx;

					.btn {
						width: 47%;
					}
				}

				.head {
					display: flex;
					justify-content: space-between;
					text-align: center;

					.head-item {
						font-size: 24rpx;
						font-weight: 600;
						border: 1rpx solid transparent;
						padding: 15rpx 20rpx;
						border-radius: 10rpx;
						color: #fff;
					}

					.activity {
						border: 1rpx solid rgba(255, 255, 255, 0);
						background:linear-gradient(90deg, #C8F673 0%, #98F083 100%);
						color: #000;
					}

					.stillness {
						color: #fff;
						background-color: rgba(0, 0, 0, 0.2);
						border: 1rpx solid #ffffff;
					}
				}
			}
		}
	}
</style>